<template>
  <div class="node cliptencode">
    <div class="node-header">
      <span class="node-title">{{ nodeData._meta?.title || `Node ${nodeId}` }}</span>
      <span class="node-type">{{ nodeData.class_type }}</span>
    </div>
    
    <div class="node-content">
      <div class="node-inputs">
        <div class="input-field">
          <label>提示词</label>
          <div class="input-value">{{ nodeData.inputs?.text || '' }}</div>
        </div>
        <div class="connection-point">
          <span class="connection-label">CLIP 模型</span>
          <div class="connection-value">{{ formatConnection(nodeData.inputs?.clip) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  nodeData: {
    type: Object,
    required: true
  },
  nodeId: {
    type: [String, Number],
    required: true
  }
})

const formatConnection = (connection) => {
  if (Array.isArray(connection)) {
    return `节点 ${connection[0]} 的输出 ${connection[1]}`
  }
  return connection || ''
}
</script>

<style scoped>
.node {
  background: #2a2a2a;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  color: #fff;
}

.node-header {
  background: #383838;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.node-title {
  font-weight: bold;
  font-size: 14px;
}

.node-type {
  font-size: 12px;
  padding: 2px 6px;
  background: #7B61FF;
  border-radius: 4px;
}

.node-content {
  padding: 12px;
}

.node-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-field label {
  color: #aaa;
  font-size: 12px;
}

.input-value {
  background: #383838;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
}

.connection-point {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.connection-label {
  color: #aaa;
  font-size: 12px;
}

.connection-value {
  font-size: 12px;
  color: #7B61FF;
}
</style> 